<!--
 * @Author: your name
 * @Date: 2021-10-28 09:15:12
 * @LastEditTime: 2023-05-07 12:20:00
 * @LastEditors: clr
 * @Description: In User Settings Edit
 * @FilePath: \wy\src\components\base\mind\o-base-mind\toolbarItem.vue
-->
<style lang="scss" scoped>
.disabled {
  pointer-events: none;
  color: #c5c8ce;
}
::v-deep.ivu-dropdown {
  display: inline;
  p {
    padding-left: 12px;
    height: 28px;
    line-height: 28px;
    align-items: center;
    display: flex;
    > i {
      font-size: var(--default-icon-size);
      display: inline-block;
    }
    > b {
      padding-left: 7px;
      display: inline-block;
      font-weight: normal;
    }
    > .aicon {
      padding-left: 7px;
    }
    &:hover:not(.disabled) {
      color: var(--default-hover-font-color);
    }
    &.color-error:not(.disabled) {
      color: $toolbar-btn-color-error;
    }
  }
  .ivu-dropdown-rel > .ivu-dropdown-item {
    padding: 0px;
    > p {
      padding-left: 12px;
      height: 28px;
      line-height: 28px;
      align-items: center;
      display: flex;
      > i {
        font-size: var(--default-icon-size);
        display: inline-block;
      }
      > b {
        padding-left: 7px;
        display: inline-block;
        font-weight: normal;
      }
      > .aicon {
        padding-left: 7px;
      }
      &:hover:not(.disabled) {
        color: var(--default-hover-font-color);
      }
      &.color-error:not(.disabled) {
        color: $toolbar-btn-color-error;
      }
    }
  }
}
</style>
<template>
  <Dropdown placement="right">
    <DropdownItem :disabled="data.disabled">
      <p
        @click.stop="
          !data.disabled && data.click($event, data),
            handleClickLink(data, $event)
        "
        :class="data.disabled && 'disabled'"
      >
        <Icon v-if="data.icon" :custom="'wy-icon btn-icon ' + data.icon"></Icon>
        <b v-if="data.text">{{ data.text }}</b>
        <Icon
          v-if="data.childs && data.childs.length > 0"
          custom="wy-icon wy-fanhui"
          class="btn-next"
        ></Icon>
      </p>
    </DropdownItem>
    <DropdownMenu slot="list">
      <template v-for="(d, idx) in data.childs">
        <toolbaritem
          :key="idx"
          :data="d"
          v-if="d.childs && d.childs.length > 0 && !d.disabled"
        ></toolbaritem>
        <DropdownItem v-else :key="idx" :disabled="d.disabled">
          <p
            @click.stop="
              !d.disabled && d.click($event, d), handleClickLink(d, $event)
            "
            :class="d.disabled && 'disabled'"
          >
            <Icon :custom="'wy-icon btn-icon ' + data.icon"></Icon>
            <b>{{ d.text }}</b>
          </p>
        </DropdownItem>
      </template>
    </DropdownMenu>
  </Dropdown>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Tsrv } from '@/services';

@Component({ name: 'toolbaritem' })
export default class toolbar extends Vue {
  @Prop({
    default: () => {
      return [];
    }
  })
  data: [];

  handleClickLink(item: any, event: any) {
    this.$emit('click', item, event);
  }
}
</script>
